<template>
	<view class="mall">
		<view class="mallTop">
			<view class="searchs">
				<view class="search">
					<input class="uni-input" type="search" placeholder="五常大米">
					<image src="../../static/images/mall_ico_serch@3x.png" mode="widthFix"></image>
				</view>
				<view class="rte">
					<image src="../../static/images/nav_ico_shoppingcar@3x.png" mode="widthFix"></image>
					<image src="../../static/images/nav_ico_dingdan@3x.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="malllist">		
				<u-sticky>
				    <u-tabs 
					:list="list1" 
					@click="clickList" 
					lineColor="#16843F"
					:activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}"
				></u-tabs>
				</u-sticky>
				<view class="classification" @tap="cation">
					<u-icon name="list-dot" size="20"></u-icon>
					<text>分类</text>
				</view>
			</view>
			<view class="imgs"><image src="../../static/images/1683273255459.jpg" mode="widthFix"></image></view>
		</view>
		<view class="mallBom">
			<view class="mallBomList">
				<view class="list list1">
					<view class="title">
						<text class="wz">今日疯狂</text>
						<view class="time">
							<text>{{h}}</text>:
							<text>{{m}}</text>:
							<text>{{s}}</text>
						</view>
					</view>
					<view class="cont">
						<view class="contSet">
							<view class="img">
								<image src="../../static/images/11.jpg" mode="widthFix"></image>
							</view>
							<view class="txs">
								<text class="font19">￥29.9</text>
								<text class="font15">¥39.9</text>
							</view>
						</view>
						<view class="contSet">
							<view class="img">
								<image src="../../static/images/12.jpg" mode="widthFix"></image>
							</view>
							<view class="txs">
								<text class="font19">￥19.9</text>
								<text class="font15">¥29.9</text>
							</view>
						</view>
					</view>
				</view>
				<view class="list list2">
					<view class="title">
						<text class="wz">新品特惠</text> <text class="ou">0元试用</text>
					</view>	
					<view class="cont">
						<view class="contSet">
							<view class="img">
								<image src="../../static/images/13.jpg" mode="widthFix"></image>
							</view>
							<view class="txs">
								<text class="font19">好评99.8%</text>
							</view>
						</view>
						<view class="contSet">
							<view class="img">
								<image src="../../static/images/14.jpg" mode="widthFix"></image>
							</view>
							<view class="txs">
								<text class="font19">母婴精选</text>
							</view>
						</view>
					</view>
				</view>
				<view class="list list3">
					<view class="title">
						<text class="wz">豫优精选</text> <text class="ou">官方直采选好货</text>
					</view>	
					<view class="cont">
						<view class="contSet">
							<view class="img">
								<image src="../../static/images/15.jpg" mode="widthFix"></image>
							</view>
							<view class="txs">
								<text class="font23">9折</text>
							</view>
						</view>
						<view class="contSet">
							<view class="img">
								<image src="../../static/images/16.jpg" mode="widthFix"></image>
							</view>
							<view class="txs">
								<text class="font23">8.5折</text>
							</view>
						</view>
					</view>
				</view>
				<view class="list list4">
					<view class="title">
						<text class="wz">排行榜</text> <text class="ou">销量王者</text>
					</view>	
					<view class="cont">
						<view class="contSet">
							<view class="img">
								<image src="../../static/images/17.jpg" mode="widthFix"></image>
							</view>
							<view class="txs2">
								<text class="font19">￥</text>
								<text class="font23">9.9</text>
							</view>
						</view>
						<view class="contSet">
							<view class="img">
								<image src="../../static/images/18.jpg" mode="widthFix"></image>
							</view>
							<view class="txs2">
								<text class="font19">￥</text>
								<text class="font23">5.8</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		
			<view class="mallject">
				<mallList :mallListData='mallListData'></mallList>
			</view>
		
		</view>
	</view>
</template>

<script>
	import mallList from "@/components/mallList/mallList.vue"
	export default {
		data() {
			return {
				list1:[],
				h:'',//时
				m:'',//分
				s:'',//秒
				timer:null,//重复执行,
				mallListData:[
					{
						id:1,
						images:require('../../static/images/1683365993157.jpg'),
						name:'精品麒麟瓜500g',
						conts:'现切冷藏 口感爽脆 甜度高',
						newPrice:'19.9',
						oldPrice:'29.9'
					},{
						id:2,
						images:require('../../static/images/1683510800715.jpg'),
						name:'轻肴X融鹤北海道南瓜芝士4枚入',
						conts:'爽滑芝士 香浓牛乳',
						oldPrice:'39.9'
					},{
						id:3,
						images:require('../../static/images/1683365993157.jpg'),
						name:'融鹤北海道南瓜芝士500g',
						conts:'现切冷藏 口感爽脆 甜度高',
						newPrice:'19.9',
						oldPrice:'29.9'
					},{
						id:4,
						images:require('../../static/images/1683510800715.jpg'),
						name:'轻肴X4枚入',
						conts:'爽滑芝士 香浓牛乳',
						oldPrice:'39.9'
					}
				]
			}
		},
		onLoad() {
			this.navList(),
			this.timer = setInterval(()=>{
				this.showtime()
			})
		},
		methods: {
			showtime(){
				var nowtime = new Date(),  //获取当前时间
				endtime = new Date("2023/5/7");  //定义结束时间
				var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
				leftd = Math.floor(lefttime/(1000*60*60*24)),  //计算天数
				lefth = Math.floor((lefttime/(1000*60*60)%24)+leftd*24) < 10 ? "0" + Math.floor((lefttime/(1000*60*60)%24)+leftd*24) : Math.floor((lefttime/(1000*60*60)%24)+leftd*24),  //计算小时数
				leftm = Math.floor(lefttime/(1000*60)%60) < 10 ? "0" + Math.floor(lefttime/(1000*60)%60) : Math.floor(lefttime/(1000*60)%60),  //计算分钟数
				lefts = Math.floor(lefttime/1000%60) < 10 ? "0" + Math.floor(lefttime/1000%60) : Math.floor(lefttime/1000%60);  //计算秒数
				this.h = lefth  //返回倒计时的字符串
				this.m = leftm//返回倒计时的字符串
				this.s = lefts  //返回倒计时的字符串
				// 倒计时结束时，显示00:00:00
				if(lefttime < 0) {
					this.h = this.n= this.s = "00"
				}
			},
			navList(){
				uni.request({
					url:'/-type/list',
					method:'get',
					header:{
						'Accept':'*/*',
						'content-type': 'application/json;charset=utf-8',
						'token':uni.getStorageSync('yystoken'),
						'Authorization':uni.getStorageSync('yystoken')
					} ,
					success:(obj)=>{
						let data = obj.data.data;
						this.list1 = data
					}
				})
			},
			cation(){
				uni.navigateTo({
					url:'/pages/mall/productCation/productCation'
				})
			}
		},
		components:{
			mallList
		}
	}
</script>

<style lang="scss">
	.mallject{
		display: flex;
		// margin-top: 20rpx;
	}
	.mall{
		background-color: #F4F4F4;
		min-height: 100vh;
	}
	.mallTop{
		background-color: #fff;
		padding: 30rpx;
		.imgs{
			margin-top:20rpx;
			image{
				width: 100%;
			}
		}
	}
	.searchs{
		display: flex;
		justify-content: space-between;
		.rte{
			display: flex;
			line-height: 65rpx;
			align-items: center;
			image{
				width: 46rpx;
				margin-left: 36rpx;
			}
		}
	}
	.search{
		position: relative;
		margin: 15rpx 0 19rpx;
		width: 486rpx;
		// height: 65rpx;
		border-radius: 33rpx;
		border: 2rpx solid #16843F;
		input{
			height: 65rpx;
			background: #FFFFFF;
			border-radius: 33rpx;
			font-size: 27rpx;
			color: #999999;
			padding: 0 32rpx;
		}
		image{
			position: absolute;
			right: 32rpx;
			top: 50%;
			transform: translateY(-50%);
			z-index: 2;
			width: 38rpx;
		}
	}
	.malllist{
		display: flex;
		.u-sticky{
			width: calc(100% - 136rpx);
		}
		.classification{
			width: 136rpx;
			height:88rpx;
			background: #FFFFFF;
			box-shadow: -8rpx 0rpx 10rpx -10rpx rgba(0,0,0,0.5);
			line-height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
		}
		
	}
	.mallBom{
		padding: 24rpx 30rpx;
		.mallBomList{
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 15rpx;
			padding: 30rpx 28rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			position: relative;
			overflow: hidden;
			&::before{
				content: '';
				width: 175rpx;
				height: 28rpx;
				background: rgba(243,71,71,0.34);
				filter: blur(16px);
				position: absolute;
				top: 0;
				left: 0;
			}
			&::after{
				content: '';
				width: 178rpx;
				height: 34rpx;
				background: rgba(22,132,63,0.34);
				filter: blur(16px);
				position: absolute;
				top: 0;
				right: 0;
			}
			.list{
				position: relative;
				z-index: 9;
				min-height: 190rpx;
				width: 49%;
				padding: 12rpx;
				.title{
					.wz{
						color: #012500;
						font-size: 27rpx;
						font-weight: bold;
					}
				}
				.cont{
					display: flex;
					.contSet{
						width: 50%;
						text-align: center;
						.img{
							height: 140rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							image{
								width: 108rpx;
							}
						}
						.txs{
							.font19{
								font-size: 19rpx;
								background: #F95620;
								border-radius: 19rpx;
								color: #fff;
								padding: 3rpx 6rpx;
								margin-right: 10rpx;
							}
							.font15{
								font-size: 15rpx;
								color: #999999;
							}
						}
					}
				}
			}
			.list1{
				border-right: 2rpx solid #F0F0F0;
				padding: 0 12rpx 12rpx 0;
				.title{
					display: flex;
					align-items: center;
					.wz{
						font-style:italic
					}
				}
				.time{
					color:  #F95620;
					margin-left: 2rpx;	
					text{
						font-size: 19rpx;
						color: #fff;
						background: #F95620;
						border-radius: 4rpx;
						padding: 2rpx 8rpx;
						display: inline-block;
						margin: 0 6rpx;
					}
				}
			}
			.list2{
				border-bottom: 2rpx solid #F0F0F0;
				padding-top: 0;
				.ou{
					color: #FFFFFF;
					font-size: 19rpx;
					background: #16843F;
					border-radius: 4rpx;
					margin-left: 12rpx;
					padding: 4rpx 17rpx;
				}
				 .cont .contSet .txs .font19{
					 color: #16843F;
					 background-color: rgba(22, 132, 63, .1)
				 }
			}
			.list3{
				border-top: 2rpx solid #F0F0F0;
				.font23{
					color: #F95620;
				}
				.ou{
					color: #FFFFFF;
					font-size: 15rpx;
					background: #D2971D;
					border-radius: 4rpx;
					padding: 3rpx 12rpx;
					margin-left: 12rpx;
				}
			}
			.list4{
				border-left:  2rpx solid #F0F0F0;
				.font19{
					font-size: 19rpx;
					color: #F95620;
				}
				.font23{
					font-size: 23rpx;
					color: #F95620;
				}
				.ou{
					color: #FFFFFF;
					font-size: 15rpx;
					background: #16843F;
					border-radius: 4rpx;
					padding: 3rpx 12rpx;
					margin-left: 12rpx;
				}
			}
		}
	}
</style>
